Hace tiempo explicaba como añadir un scroll a diferentes partes el blog, sin embargo no se mencionó el añadirlo a los  gadget o cualquier elemento de página.
Lo primero de todo es añadir ese gadget, supongamos que se trata de las Etiquetas.
Nos situamos en plantilla edición de HTML y buscamos al final de la plantilla donde dice: <div id='sidebar-wrapper'>

Podría ser que en lugar de Etiquetas añadiéramos cualquier otro título, entonces lo buscaríamos por el título, sería algo así:
<b:widget id='Label12' locked='false' title='Etiquetas' type='Label'/>

Si en lugar de tratarse de las etiquetas se tratara de la Lista de blogs como es el caso de la pregunta de nuestro amigo El club de los Parados lo que haríamos sería buscar:
<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>

La parte que nos interesa de esas líneas no es el título sino la id del gadget, es decir el nombre que Blogger le asigna que sería Label12 para las Etiquetas y BlogList1 para Mi lista de blogs.

Cuando ya sabemos conseguir la id de un gadget nos situamos justo antes de ]]></b:skin> y añadimos:
Para la lista de blogs:

#BlogList1 ul{
height:200px;
overflow:auto;
}

Para las etiquetas:
#Label12 ul{
height:200px;
overflow:auto;
}

-En Label12 ul  mostrará el número que tengamos de etiquetas en este caso 12.

Con height estamos dando una altura máxima al scroll, con overflow en auto conseguimos que las barras sólo se muestren cuando el contenido supere la altura.


Si deseamos añadir color de fondo añadimos background:#000;

#BlogList1 ul{
height:210px;
overflow:auto;
background:#000;
}

Si en lugar de color deseamos que muestre una imagen añadimos background:url(url-imagen);


#BlogList1 ul{
height:210px;
overflow:auto;
background:url (url-imagen);
}

Más sobre scroll:
Scrollbar en el blog
Scroll en cualquier parte
Scroll con barra de color.
Caja de contenido con scroll

Salegna

Muchísimas gracias, lo acabo de poner en etiquetas y perfecto.
Besos

Responder
Anónimo

hola gem@. acabo de comprarme ordenador nuevo y no hay manera de conseguir la coloración que tenía antigua en los blogs. concertamente en http://paraninosconcabeza.blogspot.com tengo unos scrolls que quedan en un amarillo anarnajado. ¿en dónde en mi plantilla tengo que cambiar el color? ese naranjita me trae dolor de cabeza. quiero poner un buen amarillo, como el de la nube. ¿puedes verlo y decirme? gracias y a propósito tu blog está quedando perfecto!

Responder
Anónimo

Estupendo. Tenía ganas de algo parecido.
Voy a ver si soy capaz de ponerlo en mi Blog
Saludos
Fali

Responder
Gem@

Me alegra que re fuera útil Salegna ;)


S.O.S. el ordenador no altera los colores del blog, estos van en la plantilla :O
De todas formas en div.scroll (lo encontrarás en tu plantilla antes de ]]></b:skin>)puedes cambiar el color de fondo, si no tienes prisa tengo una entrada en borrador con una herramienta de colores fantástica nada más la tenga lista le doy salida.


Es muy sencillo Fali pero cualquier problema me avisas.

Responder
Antony

Maravilloso, por cierto en estos día lo aprendí de un amigo que me lo había dicho , recuerdo que habías publicado otro igual(Scrollbar en el blog), pero me quedo con este...

Responder
Gem@

Así es Antony pero para añadir a los gadgets la otra forma no es la correcta porque es necesario la id del elemento.
Me alegra que te guste ;)

Responder
Creador y Artista J. Antonio Fontal Álvarez

El Rincón Invisible

Responder
Creador y Artista J. Antonio Fontal Álvarez

Un blog muy interesante y muy bien hecho.

Un saludo,

Invisible

Responder
Gem@

Saludos Invisible ;)

Responder
Antonieta H.

ayyy que lindo...ya lo probé en mi blog de prueba y funciona genial...lo voy a agregar al mio.. lo había visto en algún lado y tenia esa dudita de como se hacia

saludos gem@

Responder
Anónimo

lo voy a probar en mi blog, gracias =)

Responder
Gem@

Todo tuyo Bluesoul ;)

Hola Gore cualquier problemilla me lo dices :)

Responder
Antonieta H.

gem@ sabes que en el blog de rosa vi lo de ponerle el scroll a las entradas, y quedaban con el titulo no mas...pero le deje una duda por allá no se si tu sabrás la respuesta... se puede hacer con las entradas pero que queden las fechas en los archivos? no se si me explique jajaja

saludos

Responder
Gem@

Bluesoul ¿las fechas en los archivos? :O
¿Puedes explicarme más ?

Responder
Antonieta H.

jajaja sorry es que soy malisima explicándome ni me entiendo yo misma...te decía que rosa la del escaparate de rosa le agrego a su archivo de post un sroll, en su blog tenia una entrada para hacer algo parecido pero que solo aparecieran los títulos de las entradas y con scroll...no se si ahora me explique un poquito mejor...saluditos

Responder
Gem@

Esa explicación la da Rosa en esta entrada y al final está tu comentario, pero Rosa no tiene scroll en las entradas Bluesoul, lo tiene en los gadgets de la sidebar y en los códigos que muestra en las entradas.
¿o te refieres a los archivos?

Responder
Antonieta H.

eso..en los archivo....saludos y disculpa tanta joda...

Responder
Gem@

Es la explicación de esta misma entrada Bluesoul, añadir scroll en los gadges.
En tu blog tienes los archivos con el título de "Mis post" debes seguir los pasos que explico en la entrada y buscar:
<b:widget id='BlogArchive1' locked='false' title='Mis post' type='BlogArchive'/>

La id de los archivos es BlogArchive1 entonces justo antes de ]]></b:skin> añades:

#BlogArchive1 ul{
height:210px;
overflow:auto;
}

Responder
Loly

Muchas gracias Gem@.
Soy una acumuladora de etiquetas (de vez en cuando intento englobar y quitar alguna) y con esto me has solucionado el problema de la lista interminable.

Saludos.

Responder
Loly

Otra cosa, ¿cómo haces que el favicon -no estoy segura de que se llame así, está antes de la url- gire cual máquina tragaperras? (Ahora se ha parado).

Un abrazo.

Responder
Loly

Y con este tres. Te tengo en reader, pero aquí no me puedo apuntar a tus seguidores (qué barbaridad, 160) ¿sólo dejar de seguirte? ¿O estoy torpe hoy?

Ya van un saludo y un abrazo, pues ahora un beso.

Responder
Loly

Mira, no me hagas ni caso, miraba los blogs que me siguen a mí, no a los que sigo yo, y claro, ya estás entre éstos, por eso no me podía apuntar. Ya me extrañaba.

Responder
Gem@

Hola Loly el favicón es así que gira mientras la página está cargando y se para cuando ya se ha cargado ;)
Si te gusta en esta entrada explico como hacerlo Favicón para Blogger beta
Lo de seguidores pues "ni caso" jajajaja
Un abrazo.

Responder
Unknown

Hola,muy buen post este de Scroll en la Sidebar,te felicito,gracias.
Salud.

Responder
Gem@

Gracias a ti Jaume ;)

Responder
Flores Literarias

auxulioooooooooooo ayyyyyyyyyyyyyy no me funciona sigo los pasos, entro al blog y no pasa nada ayyyyyyyyyy porfa

Responder
Gem@

¿Con no pasa nada a qué te refieres?

Responder
Flores Literarias

la entrada a la que le aplique los pasos que diste -similar a los enlaces amigos- no aparece en la cajita de las imagenes, no aparece nada.. intente con otra entrada e igual.. no sé que estaré haciendo mal.. queria poner algunos gadgets en scroll pero sera dejarlos asi. Un abazo

Responder
Gem@

No he podido ver tu blog Flores literarias, no puedo saber donde está el error pero seguro que es de fácil solución :)

Responder
Flores Literarias

hola gema en verdad necesito tu a yuda, me urge este scroll en enlaaces amigos y no me sale...

mi blog es floresliterarias.blogspot.com
porfa echame una miradita y me dices que rayos hago mal... gracias, gracias.

Responder
Flores Literarias

Gemaaaaaaa no me abandones

Responder
Gem@

No te abandono jajajaja estoy poniendo al día los comentarios.
Veamos... la id de tu lista de amigos está en tu blog con LinkList2
Por lo tanto sería:

#LinkList2 {
height:210px;
overflow:auto;
background:#fff;
}

Prueba y me dices ;)

Responder
Flores Literarias

gemita lop he intentado y nada.... será que moví algo en las márgenes en la plantilla??? y es raro porque se la aplique a otro blog sale sin problema. A vuelo de pájaro sabes que puede ser?

Responder
Gem@

Ya lo solucionamos :)

Responder
Flores Literarias

gracias bella

Responder
Rubí

Hola Gema!! estoy tratando de ponerlo en dos listas, y en ninguna me funciona, hago los pasos al pie de la letra, no se que pase :$

Este es uno de los que quiero poner:

#HTML7 ul{
height:200px;
overflow:auto;
}

Este es el otro:

#BlogList1 ul{
height:200px;
overflow:auto;
}

¿Me ayudarías por favor? Gracias!!

Responder
Rubí

Ahh ya lo pude poner, cambié de lugar el código viendo otras entradas tuyas así supe donde, coloque los códigos aqui:

/* Sidebar Content
-----------------------------------------------

y listo!!

Gracias, me ha servido mucho tu blog.

Responder
Gem@

» Genial Rubí, gracias por avisarme ;)

Responder
Deybi

Esto es fascinante. Hasta ahora lo descubro y tanto que me hacía falta!!!.

Responder
Gem@

¿Dónde estabas que no lo viste Birdelo? :) :)

Responder
VelvetMafer

Oh... mcuhas gracias por toda la ayuda que das para Blogger... me ha echo mejorar la apariencia de mi blog

Responder
Gem@

Me alegra mucho que te fuera útil MaFeR483 LoL!;)

Responder
ZZMidway

Una pregunta Gema, estoy trabajando con el bloglist tengo que poner una lista muy larga y he desactivado que no se vea el icono(De hecho me lo he cargado en el código para que no deje su hueco).
El caso es que se me presenta un dilema y es que las separaciones entre líneas son mayores de lo normal(separación de línea por defecto), ahí alguna manera de cambiarlo?

Responder
Gem@

ZZMidway en ese código del bloglist cada enlace va dentro de un DIV esto es lo que lleva cada enlace:
<li style='display: block;'>
<div class='blog-content'>
<div class='blog-title'>
<a href='url-agina' target='_blank'>
Alex4ever</a>
</div>
<div class='item-content'>
</div>
</div>
<div style='clear: both;'></div>
</li>

En HTML un enlace cualquiera lleva esto:
<a href="url-de-la-página">aquí texto</a>

Si decidiste sacar el icono y la idea es añadir una simple lista quizás sea más útil añadir un gadget en HTML con lo siguiente:
<ul>

<li><a href="url-pgina" target="_blank">texto</a></li>
<li><a href="url-página" target="_blank">texto</a></li>
<li><a href="url-página" target="_blank">texto</a></li>
</ul>

Responder
ZZMidway

Thx por tu tiempo Gema. Verás es que yo lo tenía en html y en html no aparece el scroll. También hizé una prueba rápida ahora para ponerlo con ese código en html y lo mismo. Por eso mi solución pasa por modificar ese código pero no encuentro donde mete la separación de línea.

Responder
Deybi

Hola Gem@.

Entonces no se puede usar para un HTML. porque trato de hacerlo y no me funciona???.

Responder
Gem@

ZZMidway y Birdelo:

Con HTML también se puede, si os fijáis al final de la entrada da más opciones para añadir scroll, donde dice "Scroll en cualquier parte" es para html ;)

Responder
ZZMidway

Pues aunque parezca raro sigue sin salirme. Me lo acorta pero no aparece el scroll(lo tengo ahora mismo en el blog puesto en la sidebar derecha abajo "prueba" zzmidway.com). Además se me vuelve añadir el problema de que ahora con ese div el no lo puedo meter y el parrafo me añade la separación entre líneas que estoy intentando evitar.

Responder
ZZMidway

"b-r" es lo que no me deja meter

Responder
Gem@

ZZMidway sigue estos pasos...
Añade en la css lo siguiente:

#scroll {
width:200px;
height:300px;
overflow:auto;
background-color:#fff;
}

guarda los cambios y crea un nuevo elemento de página en HTML...
Allí copia y pega lo que ves en ese archivo y guarda.
Mira este ejemplo te saldrá así pero sin el icono de las listas.

Responder
ZZMidway

Vaya muchisimas thx. Siento ocasionar tantas molestias. Lo he hecho todo tal cuál y no sale la barra :( que raro!! sl2s y thx de tods formas.

Responder
Gem@

Esto se está convirtiendo en un asunto de amor propio :O
Creo que ya sé lo que es. El ancho de tu sidebar es de 180 y el del scroll 200 por eso el listado está incompleto porque la barra si está ahí pero oculta.
Modifica en la css

#scroll {
width:170px;
height:300px;
overflow:auto;
background-color:#fff;
}


Y si resulta dímelo ¿si?

Responder
ZZMidway

Increible Gema, perfecto. Jamas se me hubiera ocurrido, además habia probado a ponerlo sin el width y me imagino que me pondria un width default de 200. Mil gracias, saludos.

Responder
Raúl

Hola que tal Gema me funcionó bien el codigo lo puse al archivo del blog y tambien al top de comentaristas. Pero el problema es que no pude ponerlo (no se visualiza) en los artículos recientes, en los videos y en los ultimos comentarios, que estan en el sidebar. Porque será?

Responder
Gem@

Hola Raúl para que funcione en otros gadget debes averiguar la id del gadget en cuestión por el mismo procedimiento que hiciste con los archivos.
Por ejemplo la id de comentarios recientes la tienes con HTML11
Los vídeos con HTML12
Y los artículos recientes con HTML2 ;)

Responder
Raúl

Q tal gema si hice lo mismo con HTML11 Y HTML12 tal cual como hice en archivos y Top comentaristas pero no pasó nada no se porque

Responder
Gastón

Que tal gema!

Realmente te felicito por el post aunque a mi no me halla funcionado. Mi blog es yorasta.blogspot.com

Cuando le doy un ancho menor al de mi sidebar para ver si puede que el scroll esté "escondido", simplemente se me acorta el ancho de ese gadget ocultando el texto que debería aparecer pero del scroll ni noticias. Si me puedes ayudar, desde ya muchas gracias!!

Responder
Gastón

Gem@:

Asunto solucionado, lo coloque debajo de

/* Sidebar Content

No lo tomes a mal, pero si te tengo acá te doy un beso! ja

Muy buena tu info! obvio que ya estas en mis marcadores!

Responder
Gem@

Raúl déjalo puesto que lo vea online es la única forma de saber donde está el error.

yz Gracias por el condenatorio Gastón, no me lo puedo tomar a mal porque es comprensible, cuando algo nos resulta bien la alegría nos hace ser efusivos :)

Responder
Raúl

Hola que tal gema gracias por la ayuda. Nunca quité el codigo desde q escibí está puesto no lo he quitado esta asi
#HTML12 ul{
height:210px;
overflow:auto;
}
#HTML11 ul{
height:210px;
overflow:auto;
}
]]>< /b:skin >

Responder
Gem@

Raúl cambia a height:300px;

Responder
Raúl

Q tal gema ya lo camie por height:300px; pero no pasó nada, si quieres puedes ver el codigo pero lo raro es que HTML10 que es el TOp de comentaristas si funciona y con el resto que es HTML no

Responder
Gem@

Pues la única forma que hay es esa añadiendo la id :O
#HTML2 {
height:200px;
width:244px;
overflow:scroll;
}

En los vídeos ya lo tienes :)

Responder
Anónimo

genial :D

Responder
Gem@

yz Gracias Anónimo :)

Responder
Anónimo

Gema,
como estas?
quiero hacer un scroll y adentro poner unas imagenes de mi computadora...como articulo estos codigos con las imagenes para que me quede bien?
Saludos!

Responder
Gem@

yz Estoy bien ¡Gracias! puedes ver la siguiente url:
http://gemablog-.blogspot.com/2007/07/scroll-de-imgenes.html

La próxima vez por favor atiende la petición que aparece en el formulario
"Si tu perfil no está activado añade la url del blog, es imprescindible para poder ayudarte"

Responder
Anabel Cornago

Yupiiiiiiiiiiiiiiiiii!!!, muchísimas gracias Gema, por fin lo conseguí. Pero no me ha funcionado con los "linklist".
Abrazos desde Hamburgo.

Responder
Gem@

yz Hola Anabel para los linklist debes buscar la id en la plantilla y crear los estilos para el scroll. Con esta entrada te guiarás mejor:
http://gemablog-.blogspot.com/2008/11/aadir-scroll-en-los-gadges-elementos-de.html ;)

Responder
Anabel Cornago

Gema, problema resuelto. Es que habäia escrito "Linklist" en lugar de "LinkList", ya ves, una mayüuscula, je,je.
Mil gracias.

Responder
Gem@

yz Hola Anabel yo pensaba que sólo lo habías escrito aquí así. Me alegra esté resuelto :)

Responder
Unknown

Muchas gracias tu blog me ha sido de gran ayuda y lo seguire visitando :D

Responder
Gem@

:: Me alegra que te fuera de útil Sethorus
:)

Responder
Patricia - La Siesta de Cristóbal

Gema,
Sólo he venido a presentarme y a agradecerte tu página, que realmente es muy ilustrativa para los que deseamos aprender y no sabemos nada de nada.
Y además para decirte, si no es molestia, que voy a agregarte en mi lista de tablas salvavidas, pero quería primero, y antes de hacerlo, dejártelo saber.
Un beso
Patricia

Responder
Gem@

:: Bienvenida Patricia, pero cómo me pides permiso para enlazarme mujer?? al contrario, te lo agradezco :)

Responder
Sangre Española

Hola gem@, lo primero agradecerte tu blog ya que me ha ayudado mucho..
Ahora la pregunta:
En mi blog, en las entradas he puesto este sistema que aki explicas y en opera e IE funciona estupendamente, pero en firefox no va...
Alguna solución...Gracias
Mi blog
sangrespanola.blogspot.com

salu2

Responder
Anónimo
Este comentario ha sido eliminado por el autor.
Responder
Anónimo

Hola Gema he puesto el código del scrollbar como comentas y no me funciona:

#Label12 ul{
height:15px;
overflow:auto;
}]]>

Label 12 es la id de mi etiqueta Bandas
¿¿podrías hecharme una mano
http://www.lametalbella.blogspot.com

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top